import { useIntersectionObserver } from '@vueuse/core'

// 定义懒加载插件
export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy',{
    mounted (el, binding) {
        // el:指令绑定的元素
        // binding:binding.value  指令等于号后的绑定的表达式的值 图片url
        // console.log('el, binding.value:',el, binding.value)
       const {stop}= useIntersectionObserver(
            el,
            ([{isIntersecting}]) => {
                // console.log('isIntersecting:',isIntersecting)
                if (isIntersecting) {
                    // 进入视口区域
                    el.src = binding.value
                    stop()
                    // stop 是 useIntersectionObserver 返回的一个函数，用于停止对目标元素的观察。
                    // 为什么需要 stop？
                    // 一旦图片进入视口并加载完成，就不再需要继续观察该元素是否进入视口。
                    // 调用 stop() 可以停止观察，避免不必要的性能开销。
                    // 如果不调用 stop()，IntersectionObserver 会继续监听目标元素的状态变化，即使图片已经加载完成。
                 }
            },
          )
        }
    })
}
}
